<template>
  <div class="page-min">
    <el-table
        max-height="720"
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        border
        :header-cell-style="{background:'#F0F1F6',color:'#333'}"
        style="width: 100%;">
      <el-table-column
          prop="gatherDate"
          label="日期">
      </el-table-column>
      <el-table-column
          prop="actualProfitTotal"
          label="提成总额">
      </el-table-column>
      <el-table-column
          prop="name"
          label="操作">
        <template slot-scope="scope">
          <el-button  @click="btnDeales(scope.row)"   type="text" size="mini">明细</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="float: right; margin-right: 50px; margin-top: 10px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total=total>
    </el-pagination>
  </div>
</template>

<script>
  import { profitGatherList } from "@/api/report"
  export default {
    created() {
      this.getList()
    },
    data() {
      return {
        tableData:[],
        currentPage: 1,
        total: 0,
        pageSize:10,
      }
    },
    methods: {
      getList(){
        profitGatherList().then((r) => {
          if (r.code !== 200) {
            this.$message.error(r?.msg)
            this.tableData =[]
          }
          else {
            if (r.rows.length){
              this.tableData = r?.rows
              this.total = r?.total
            }else {
              this.tableData =[]
            }
          }
        })
      },
      btnDeales(row){
        this.$router.push({
          path:'/statisticsManage/itemstotal',
          query:{
            reportDate:row.gatherDate
          }
        })
      },
      handleSizeChange(size){
        this.pageSize = size
      },
      handleCurrentChange(current){
        this.currentPage = current
      },
    },
}
</script>

<style lang="scss" scoped>
.page-min{
    margin: 10px;
    background-color: #fff;
    border:1px solid #ddd;
    border-radius:4px;
    padding:10px;
    overflow: auto;
}
</style>